<template>
  <!-- 学习key的作用 -->
  <!-- 提高dom更新性能,不加key也不影响功能 -->
  <div>
    <ul>
      <li v-for="obj in arr" :key="obj.id">
        {{ obj.name }} --- <input type="text" />
      </li>
    </ul>
    <button @click="change">交换下标1和2元素位置</button>
    <button @click="add">从中间新增1个</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "小明",
          id: 100,
        },
        {
          name: "老王",
          id: 194,
        },
        {
          name: "老秦",
          id: 239,
        },
        {
          name: "老李",
          id: 15,
        },
        {
          name: "老赵",
          id: 27,
        },
      ],
    };
  },
  methods: {
    change() {
      let temp = this.arr[1];
      this.$set(this.arr, 1, this.arr[2]);
      this.$set(this.arr, 2, temp);
    },
    add() {
      this.arr.splice(2, 0, {
        name: "我是新来的",
        id: "888",
      });
    },
  },
};
</script>

<style></style>
